<template>
    <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
      <el-form
          :inline="true"
          :model="searchForm"
          class="mb-4"
      >
        <el-form-item
            v-for="field in searchFields"
            :key="field.prop"
            :label="field.label"
        >
          <el-input
              v-if="field.type === 'input'"
              v-model="searchForm[field.prop]"
              placeholder="请输入"
              clearable
          />

          <el-select
              v-else-if="field.type === 'select'"
              v-model="searchForm[field.prop]"
              placeholder="请选择"
              :style="{ width: '200px' }"
          >
            <el-option
                v-for="option in field.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            />
          </el-select>
  
          <el-date-picker
              v-else-if="field.type === 'date-range'"
              v-model="searchForm[field.prop]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>
      </el-form>
  
      <div class="btnseacch">
        <div v-if="searchFields.length>0">
          <el-button @click="resetForm">&nbsp;&nbsp;&nbsp;&nbsp;重置&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
          <el-button type="primary" @click="handleSearch">&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </div>
  
        <div>
          <el-button type="primary" @click="addRow">&nbsp;&nbsp;&nbsp;&nbsp;发布公告&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
          <el-button v-if="props.deletSome" type="primary"  @click="deletSome">批量删除</el-button>
        </div>
      </div>
  
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits, reactive, toRefs } from 'vue';
  const props = defineProps({
    searchFields: {
      type: Array,
      required: true,
    },
    deletSome:{
      type: Boolean,
      default: false,
    }
  });
  
  const emits = defineEmits(['search', 'reset']);
  
  // 搜索表单
  const searchForm = reactive({});
  
  // 初始化搜索表单
  const initSearchForm = () => {
    props.searchFields.forEach(field => {
      searchForm[field.prop] = '';
    });
  };
  
  // 处理搜索
  const handleSearch = () => {
    emits('search', { ...searchForm });
  };
  function addRow() {
    emits('addRow', "add");
  }
  // 重置表单
  const resetForm = () => {
    initSearchForm();
    emits('reset');
  };
  
  function deletSome() {
    emits('deletSome');
  }
  // 初始化表单
  initSearchForm();
  </script>
  
  <style scoped>
  .el-form-item {
    margin-right: 20px;
  }
  .btnseacch{
    display: flex;
    justify-content: space-between;
  }
  </style>
  